import React, { createElement } from 'react';
import { Comment, Tooltip, List, Empty, Avatar, Popconfirm } from 'antd';
import moment from 'moment';
import {
  LikeOutlined,
  LikeFilled,
  VerticalAlignTopOutlined,
  VerticalAlignBottomOutlined,
  DeleteOutlined,
} from '@ant-design/icons';
import { connect } from 'umi';
import UploadUtil from '@/components/UploadUtil';

class CommentList extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      dataSource: [],
    };
  }
  componentDidMount() {
    this.query();
  }
  handelTop = (val: any) => {
    console.log(val);
    const id = val.id;
    const istop = val.isTop;
    const { dispatch } = this.props;
    dispatch({
      type: 'Abp/updateIsTop',
      payload: {
        id,
        istop: !istop,
      },
    });
    this.query();
  };
  handleDel = (val: any) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'Abp/delete',
      payload: {
        id: val.id,
      },
      control: 'Edu_CourseCommentService',
    });
    this.query();
  };
  query = () => {
    const { dispatch, record } = this.props;
    dispatch({
      type: 'Abp/getList',
      payload: {
        id: record,
        skipCount: 0,
        maxResultCount: 9999,
      },
      control: 'Edu_CourseCommentService',
    }).then(() => {
      const resp = this.props.response.result.items;

      this.setState({ dataSource: resp });
    });
  };
  render() {
    const { dataSource } = this.state;
    dataSource.forEach((item: any) => {
      item.creationTime = (
        <Tooltip title={moment(item.creationTime).format('YYYY-MM-DD HH:mm:ss')}>
          <span>{moment(item.creationTime).fromNow()}</span>
        </Tooltip>
      );
      item.actions = [
        <Tooltip title={item.likeNum}>
          {createElement(item.likeNum === 0 ? LikeOutlined : LikeFilled)}
          <span className="comment-action" style={{ marginLeft: 4 }}>
            {item.likeNum}
          </span>
        </Tooltip>,
        <Tooltip title={item.isTop === true ? '取消置顶' : '置顶'}>
          {item.isTop === true ? (
            <a onClick={() => this.handelTop(item)}>
              <VerticalAlignTopOutlined />
            </a>
          ) : (
            <a onClick={() => this.handelTop(item)}>
              <VerticalAlignBottomOutlined />
            </a>
          )}
        </Tooltip>,
        <Popconfirm title="确定删除?" onConfirm={() => this.handleDel(item)}>
          <Tooltip title="删除">
            <a>
              <DeleteOutlined style={{ color: 'red', marginLeft: 10 }} />
            </a>
          </Tooltip>
        </Popconfirm>,
      ];
    });
    return (
      <>
        {dataSource.length > 0 ? (
          <List
            className="comment-list"
            itemLayout="horizontal"
            style={{ maxHeight: 600, overflowY: 'auto' }}
            dataSource={dataSource}
            renderItem={(item: any) => (
              <li>
                <Comment
                  actions={item.actions}
                  author={item.userName}
                  avatar={<Avatar src={UploadUtil.imgServ + item.avatar} alt={item.userName} />}
                  content={item.contents}
                  datetime={item.creationTime}
                />
              </li>
            )}
          />
        ) : (
          <Empty description="暂无评论" />
        )}
      </>
    );
  }
}

export default connect(({ Abp }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: Abp.currentUser,
}))(CommentList);
